import React, { Component } from 'react';
import axios from 'axios';
import './transfer.css'
import InputNum from '../input_num'
export default class index extends Component {

    state = {
        voiceType: [
            {id:'v1',name:'普通女声',value:'0'},
            {id:'v2',name:'普通男声',value:'1'},
            {id:'v3',name:'情感合成-度逍遥',value:'3'},
            {id:'v4',name:'情感合成-度丫丫',value:'4'}
        ],
        chooseVoice:'0'
    }

    transferText = () => {
        const inputText = this.inputNode.value;
        const {chooseVoice} = this.state;
        if (inputText.length > 2000) {
            alert('每次转换的文字不得超过2000字符');
            return;
        }
        let param = new URLSearchParams();
        param.append("client_id", "kVcnfD9iW2XVZSMaLMrtLYIz");
        param.append("client_secret", "O9o1O213UgG5LFn0bDGNtoRN3VWl2du6");
        param.append("grant_type", "client_credentials");

        axios({
            headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
            method: 'post',
            url: 'http://106.55.168.95:3000/s1/oauth/2.0/token',
            data: param
        }).then(response => {
            console.log('请求成功', response);
            if (response.status === 200) {
                const { access_token } = response.data;
                let param2 = new URLSearchParams();
                param2.append("tex", inputText);
                param2.append("tok", access_token);
                param2.append("cuid", "12345postman");
                param2.append("ctp", "1");
                param2.append("lan", "zh");
                param2.append("spd", "5");
                param2.append("pit", "5");
                param2.append("vol", "5");
                param2.append("per", chooseVoice);
                param2.append("aue", "3");
                axios({
                    headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
                    method: 'post',
                    url: 'http://106.55.168.95:3000/s2/text2audio',
                    responseType: 'blob',
                    data: param2
                }).then(
                    response => {
                        console.log(response)
                        // 创建隐藏的可下载链接
                        let eleLink = document.createElement('a');
                        eleLink.download = 'test.mp3';
                        eleLink.style.display = 'none';
                        // 字符内容转变成blob地址
                        let blob = new Blob([response.data]);
                        eleLink.href = URL.createObjectURL(blob);
                        // 触发点击
                        document.body.appendChild(eleLink);
                        eleLink.click();
                        // 然后移除
                        document.body.removeChild(eleLink);
                    }
                )
            } else {
                alert('请求失败');
                return;
            }
        }, error => {
            console.log(error);
            // 这里需要注意，error回调函数返回的是error对象，不能直接传入
        }).catch(err => {
            console.log(err);
            alert('未知异常，请联系管理员...');
            return;
        })
    }

    render() {
        const {chooseVoice}= this.state;
        return (
            <div>
                请输入要转换的文字:<br /><input ref={c => this.inputNode = c} type="textarea" className="input-text" />
                声音：
                {
                    this.state.voiceType.map(ele => {
                        return (
                            <span key={ele.id}>
                            <input id={ele.id} type="radio" name="voice" value={ele.value} checked={ele.value === chooseVoice} onChange={(e)=>this.setState({chooseVoice:e.target.value})} />
                            <label htmlFor={ele.id}>{ele.name}</label>
                            </span>
                        )
                    })
                }
               <br></br>
                <button onClick={this.transferText}>点击转换</button>
            </div>
        )
    }
}
